<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>通知</span>
        <el-button type="primary" @click="openSendNoticeDialog">发送通知</el-button>
      </div>
      <!-- 搜索表单 -->
      <el-form :model="searchForm" label-width="80px" style="margin-top: 20px;">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="已读/未读">
              <el-select
                  v-model="searchForm.showredio"
                  placeholder="请选择已读/未读"
              >
                <el-option label="未读" value="0" />
                <el-option label="已读" value="1" />
                <el-option label="管理员" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="ListArray">搜索</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="clearsearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <div>
      <el-row>
        <!-- 表格内容 -->
        <el-table :data="ListData" style="width: 100% ;margin-top: 30px;" v-loading="loading">
          <el-table-column label="序号" width="70" type="index" />
          <el-table-column label="发件人" prop="adminName" />
          <el-table-column label="收件人" prop="userName" />
          <el-table-column label="通知内容" prop="content" />
          <el-table-column label="已读/未读">
            <template #default="{ row }">
              <el-tag
                  :type="{
              0: 'info',
              1:'success',
              3:'warning'
            }[row.showredio]"
              >
                {{
                  {
                    "0": '未读',
                    "1": '已读',
                    "3": '管理员',
                  }[row.showredio]
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240">
            <template #default="{ row }">
              <el-button
                  type="danger"
                  :icon="Close"
                  circle
                  plain
                  @click="handleCancel(row)"
              ></el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无通知数据" />
          </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next"
            background
            :total="total"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end"
        />

      </el-row>

      <!-- 发送通知弹框 -->
      <el-dialog
          v-model="sendNoticeDialogVisible"
          title="发送通知"
          :close-on-click-modal="false"
      >
        <el-form :model="sendNoticeForm" label-width="80px">
          <el-form-item label="收件角色">
            <el-select v-model="sendNoticeForm.recipientRole" placeholder="请选择收件角色">
              <!-- 这里需要根据你的实际情况填充选项 -->
              <el-option label="客户" value="1" />
              <el-option label="中介" value="2" />
              <el-option label="房东" value="3" />
              <el-option label="所有用户" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="发送内容">
            <el-input v-model="sendNoticeForm.content" type="textarea" placeholder="请输入通知内容" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="sendNoticeDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="sendNotice">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>

<script setup>
import {Close, Check} from "@element-plus/icons-vue";
import { ref } from "vue";
import { useUserInfoStore } from "@/stores/userinfo.js";
import {
  addaddadminNotice,
  addNotice,
  deleteNotice,
  getNoticeList,
  getNoticePageList,
  updateNotice
} from "@/api/notice.js";
import { ElMessage, ElMessageBox, ElDialog } from "element-plus";

const userInfoStore = useUserInfoStore();
const userinfoId = userInfoStore.info.id;
const userrole = userInfoStore.info.roleId;
const loading = ref(false);
const ListData = ref([]);
const searchForm = ref({ userId: '', showredio: '' });
const pageNum = ref(1);
const total = ref(0);
const pageSize = ref(15);
const sendNoticeDialogVisible = ref(false);

const ListArray = async () => {
  loading.value = true;
  console.log("searchForm.value.showredio=" + searchForm.value.showredio);
  const params = {
    ...searchForm.value,
  };
  try {
    const result = await getNoticePageList(
        pageNum.value,
        pageSize.value,
        params
    );
    ListData.value = result.res.items;
    total.value = result.res.total; // 确保接口返回total字段
  } finally {
    loading.value = false;
  }
};

const clearsearch = () => {
  searchForm.value = { showredio: '' };
  ListArray();
};

const handleCancel = (row) => {
  ElMessageBox.confirm('此操作删除通知, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteNotice(row.id);
    ElMessage.success('删除成功');
    ListArray();
  }).catch(() => {
    ElMessage.info('取消删除');
  });
};

// 分页处理
const onSizeChange = (size) => {
  pageSize.value = size;
  ListArray();
};

const onCurrentChange = (num) => {
  pageNum.value = num;
  ListArray();
};

const openSendNoticeDialog = () => {
  sendNoticeDialogVisible.value = true;
};
const sendNoticeForm = ref({
  recipientRole: '',
  content: '',
  rolesCustomer:'',
  rolesIntermediary:'',
  rolesLandlord:'',
});
const sendNotice = async () => {
  try {
    let role=sendNoticeForm.value.recipientRole;
    if (role==="1"){
      sendNoticeForm.value.rolesCustomer="1"
    }else if (role==="2"){
      sendNoticeForm.value.rolesIntermediary="1"
    }else if (role==="3"){
      sendNoticeForm.value.rolesLandlord="1"
    }else if (role==="4"){
      sendNoticeForm.value.rolesLandlord="1"
      sendNoticeForm.value.rolesIntermediary="1"
      sendNoticeForm.value.rolesCustomer="1"
    }

    const response = await addaddadminNotice(sendNoticeForm.value);
    ElMessage.success('通知发送成功');
    sendNoticeDialogVisible.value = false;
    ListArray();
  } catch (error) {
    ElMessage.error('通知发送失败');
  }
};

ListArray();
</script>
<style scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  //background-color: #f0f0f0; /* 添加灰色背景颜色 */

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-tag {
    margin: 2px;
  }
}
:deep(.el-table) {
  border-radius: 8px; /* 给表格添加圆角 */
  overflow: hidden; /* 确保内容不会溢出圆角 */
}

:deep(.el-input__inner) {
  border-radius: 8px; /* 给输入框添加圆角 */
}
</style>
